<template>
    <div>
      <h1>反馈管理</h1>
      <table>
        <thead>
          <tr>
            <th>反馈内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="feedback in feedbacks" :key="feedback.fid">
            <td>{{ feedback.content }}</td>
            <td>
              <button @click="deleteFeedback(feedback.fid)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import feedbackService from '@/api/feedback.js';
  export default {
    data() {
      return {
        feedbacks: [] 
      };
    },
    async created() {
      await this.fetchFeedbacks();
    },
    methods: {
      async fetchFeedbacks() {
        this.feedbacks = await feedbackService.fetchAllFeedbacks();
      },
      
      async deleteFeedback(fid) {
        if (confirm('确定要删除这条反馈吗？')) {
          await feedbackService.deleteFeedback(fid);
          this.feedbacks = this.feedbacks.filter(feedback => feedback.fid !== fid);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
  button {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  button:hover {
    background-color: #ff1a1a;
  }
  </style>
  